<template>
  <div style="display: flex;">
    <TreeSelect ref="treeSelect" :checkStrictly="false" :isQueryProjecDetail="false"
                isShowProjectStatus isSearchPage :needTags="[]" :is-auto-select-first="false"
                type="text" v-model="currentValue" v-bind="$attrs" v-on="$listeners"
                @select="onSelect" @proStatusChange="onStatusChange"
                @orgStatusChange="onStatusChange" />
    <a-checkbox v-if="isHasChildren" v-model="hasChildren" style="width: 64px; margin-left: 10px;"
                @change="onCheckChange">
      <div
           style="width: 30px; display: inline-block; vertical-align: middle;line-height: normal; font-size: 12px;">
        包含下级</div>
    </a-checkbox>
  </div>
</template>

<script>
import TreeSelect from '../TreeSelect'
import { findNodeFromTree, generateList } from '@/utils/util'

export default {
  name: 'orgTreeSelect',
  components: {
    TreeSelect
  },
  props: {
    ...TreeSelect.$attrs,
    // 是否显示下级勾选
    isHasChildren: {
      type: Boolean,
      default: true
    },
    value: {
      type: [String, Number, Object, Array]
    }
  },
  data() {
    return {
      hasChildren: true,
      gData: [],
      checked: '',
      selectList: []
    }
  },
  computed: {
    currentValue: {
      get: function () {
        return this.value ? this.value?._checked : ''
      },
      set: function (value) {
        this.checked = value
        this.$emit('input', {
          ...this.value,
          _checked: value
        })
      }
    }
  },
  mounted() {
    this.gData = this.$refs.treeSelect.gData
  },
  methods: {
    // 必须有change事件才能绑定在form表单上
    onSelect(selectList) {
      if (selectList && selectList.length) {
        this.selectList = [selectList[selectList.length - 1]]
      } else {
        this.selectList = []
      }

      const data = this.filterData(this.selectList)
      this.$emit('input', data)
      this.$emit('change', data)
      // 派发选择的参数给搜索联动
      this.$emit('select', selectList)
    },
    onStatusChange() {
      const data = this.filterData(this.selectList)
      this.$emit('input', data)
      this.$emit('change', data)
    },
    onCheckChange() {
      const data = this.filterData(this.selectList)
      this.$emit('input', data)
      this.$emit('change', data)
      this.$emit("hasChildren", this.hasChildren)
    },
    filterData(selectList) {
      const projectSet = []
      const detSet = []
      const orgSet = []
      if (this.hasChildren) {
        this.gData = this.$refs.treeSelect.gData
        const selectNode = findNodeFromTree(this.gData, { key: 'orgId', childrenKey: 'childTree', value: this.checked })
        selectList = selectNode && selectNode.childTree && selectNode.childTree.length ? [...selectList, ...generateList(selectNode.childTree, { childrenKey: 'childTree' })] : selectList
      }
      selectList.forEach((item) => {
        if (item.tageCode === 'PD') {
          projectSet.push(item.projectId)
          detSet.push(item.orgId)
        } else {
          orgSet.push(item.orgId)
        }
      })
      return {
        projectSet,
        detSet,
        orgSet,
        _checked: this.checked
      }
    }
  }
}
</script>
<style lang="less" scoped>
:deep(.ant-checkbox + span) {
  padding-right: 0 !important;
}
</style>